<template>
	<div class="grid">
		<div class="grid-col" v-for="item in 15" :key="item">
			<div class="grid-col_content">
				{{ item }}
			</div>
		</div>
	</div>
</template>

<script setup lang="ts"></script>

<style lang="scss">
:root {
	--gap: 6;
	--margin: 10px;
}
.grid {
	display: flex;
	flex-wrap: wrap;
	.grid-col {
		width: calc(100% / var(--gap) - var(--margin) * 2);
		height: 300px;
		margin: var(--margin);
		box-shadow: 0 0 10px 2px rgba($color: #000000, $alpha: 0.1);
		.grid-col_content {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30px;
			height: 100%;
		}
	}
}
</style>
